Skip to main content

Building The App

We can launch the application using the dev environment, or build it to prepare a bundle for the devices with the next npm scripts:

  • npm start -> Launch the dev server
  • npm run build -> Compiles the code under the build folder

IMPORTANT NOTE The production build is supposed to be hosted from the root of the domain, i,e:

In order to solve this you will need to modify the webpack.common.js file modules to set the publicPath based on the desired output.

The app uses webpack as the module bundler. It will compile the source files (code, styles, images, etc.), minify and structure them optimized for each environment. All the webpack files can be found under the webpack folder:

webpack/
  webpack.alias.js          ->  Alias to resolve the links to the modules (~ and # references)
  webpack.common.js         ->  Common configuration between dev and prod bundles
  webpack.dev.js            ->  Starting point for dev environment. Uses webpack-dev-server
  webpack.pro.js            ->  Script to create the production build
  webpack.utils.js          ->  Utils and functions used by the scripts

The common configuration non depending on environment variables or logic should be placed on the common file.

Any specific configuration should be placed on the dev/pro files.

Environment variables​

We can modify the output of the scripts by the usage of environment variables. On the next list you will find the different variables and the effect that they have on the different environments.

  • COMPRESSION -> Compress the assets with gzip and brotli. Consumes a lot of time

Webpack Plugins​

DefinePlugin​

webpack injects some values into the app at compile time. These values are different in production, or between the client and server bundles. This pattern is powerful because webpack files are in JavaScript, so the compile-time value can be dynamic.

We recommend this approach for big computations that can be avoided or for environment-specific values. There is more information about the plugin here.

Browserslist file​

The setup is using Browserslist to configure how much of the syntax to compile. For JS it would be picked by Babel Env and for the SCSS by Autoprefixer.

You can can change these values depending on you specific project requirements. For checking if a specific entry in the file would work, you can use this website.